<template>
  <el-scrollbar @scroll="handleScroll" ref="scrollFun">
    <div
      id="tiqianpi"
      class="contaier df main"
      v-loading="loading"
      v-if="isVIP != 0"
    >
      <tiqianpiMenu
        ref="menu"
        @handleTreeData="handleTreeData"
        @updateBatchPlan="updateBatchPlan"
        :treeData="treeData"
      />
      <tiqianpilist
        style="padding-bottom: 100px"
        :tiqianpiListData="tiqianpiListData"
        :isAllData="isAllData"
        infinite-scroll-distance="200"
        @updateScroll="updateScroll"
        @setCurrentNodeKey="setCurrentNodeKey"
        ref="tiqianpilistRef"
      />
    </div>
    <noIsVIP v-else></noIsVIP>
  </el-scrollbar>
</template>

<script setup>
import noIsVIP from '@/components/noIsVip/noIsVip';
import tiqianpilist from './components/TiQianPiList';
import tiqianpiMenu from './components/TiQianPiMneu';

import { getPreBatchPlan, getPreBatchLevel } from '@/api/tiqianpi/tiqianpi';
import { computed, nextTick, onMounted, ref } from 'vue';
import { useStore } from 'vuex';
const menu = ref(null);
const store = useStore();
const isVIP = computed(() => {
  return store.getters.user.userInfo.isVIP;
});

const loading = ref(false);
const tiqianpiListData = ref([]);
const treeData = ref([]);
const scrollFun = ref(null);

const tiqianpiReqData = ref({
  year: '2023 ',
  provinceCode: '',
  rowIndex: 0,
});
const isAllData = ref(false);
const treeReqData = ref({
  year: '2023',
  provinceCode: '',
});

const scrollType = ref(0);
const updateBatchPlan = (data, parentName, type) => {
  scrollType.value = type;
  tiqianpiReqData.value.rowIndex = data.rowIndex;
  tiqianpiListData.value = [];
  tiqianpilistRef.value.handleSetDomTitle(data.name, parentName);
  fetchPreBatchPlan();
};

const tiqianpilistRef = ref(null);
const handleScroll = (e) => {
  tiqianpilistRef.value.handleIsShow(e.scrollTop);
  if (
    scrollFun.value.wrapRef.scrollHeight -
      scrollFun.value.wrapRef.clientHeight ==
    e.scrollTop
  ) {
    fetchPreBatchPlan();
  }
};
const setCurrentNodeKey = (val) => {
  menu.value.setCurrentNodeKey(val);
};
const handleTreeData = (val) => {
  tiqianpiReqData.value.year = val;
  treeReqData.value.year = val;
  fetchPreBatchPlan();
  fetchPreBatchLevel();
};
const updateScroll = (scroll, type) => {
  if (type == 1) {
    nextTick(() => {
      scrollFun.value.scrollTo({ top: scroll - 160, behavior: 'smooth' });
    });
  } else {
    return;
  }
};
const data = computed(() => {
  return {
    provinceCode: store.getters.user.userInfo.pid,
  };
});

const fetchPreBatchPlan = () => {
  loading.value = true;
  tiqianpiReqData.value = { ...tiqianpiReqData.value, ...data.value };
  if (!isAllData.value) {
    getPreBatchPlan(tiqianpiReqData.value)
      .then((res) => {
        if (res.data.code == 20000) {
          if (res.data.data.length == 0) {
            isAllData.value = true;
            loading.value = false;
          }
          tiqianpiListData.value = [
            ...tiqianpiListData.value,
            ...res.data.data,
          ];
          tiqianpiReqData.value.rowIndex += res.data.data.length;
          tiqianpilistRef.value.handleCilckTree(scrollType.value);
          scrollType.value = 0;
          loading.value = false;
        } else {
          loading.value = false;
        }
      })
      .catch(() => {
        loading.value = false;
      });
  } else {
    loading.value = false;
  }
};

const fetchPreBatchLevel = () => {
  treeReqData.value = { ...treeReqData.value, ...data.value };
  getPreBatchLevel(treeReqData.value).then((res) => {
    if (res.data.code == 20000) {
      treeData.value = res.data.data;
      tiqianpilistRef.value.handleSetDomTitle(treeData.value[0].name);
    }
  });
};
if (isVIP.value != 0) {
  fetchPreBatchLevel();
}
onMounted(() => {
  if (isVIP.value != 0) {
    fetchPreBatchLevel();
  }
  fetchPreBatchPlan();
});
</script>

<style lang="scss" scoped>
#tiqianpi {
  height: 100%;
}

.contaier {
  position: relative;
}
</style>
